<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    margin-bottom: 2px;
  }
  .title-size {
    font-weight: bold;
    font-size: 1rem;
  }
</style>
<template>
  <div>
    <Form label-position="right" :label-width="100" style="position: relative;" :model="formDate">
      <div class="mb20" style="height: 30px;line-height: 30px">
        <Row>
          <Col span="13" class="ivu-form-item-label title-size">家庭住房情况</Col>
        </Row>
      </div>
      <div v-for="(item, index) in tempData.houseList2" v-bind:key="item.key" style="width: 100%;float: left">
        <div style="float: left">
          <Row class="mb20">
            <Col span="1" class="ivu-form-item-label" style="margin: 0;width: 20px;line-height: 24px;margin-left: 50px">第{{index + 1}}套：</Col>
          </Row>
        </div>
        <div style="float: left; margin-left: 100px">
          <Row class="mb20">
            <Col span="4" class="ivu-form-item-label">房屋详细地址：</Col>
            <Col span="5" class="ivu-form-item-content">
              <Input v-model="item.Address">{{item.Address}}</Input>
            </Col>
            <Col span="2" class="ivu-form-item-label">房屋性质：</Col>
            <Col span="4" class="ivu-form-item-content">
              <Select v-model="item.ownerType" @on-change="changeOwnerType(item.ownerType)">
                <Option v-for="item in ownertype_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="4" class="ivu-form-item-label">产权公司(产权人)：</Col>
            <Col span="4" class="ivu-form-item-content">
              <Input v-model="item.owner">{{item.Address}}</Input>
            </Col>
          </Row>
          <Row class="mb20">
            <Col span="4" class="ivu-form-item-label">建筑面积：</Col>
            <Col span="3" class="ivu-form-item-content">
              <Input v-model="item.buildArea" @on-blur="getArea"></Input>
            </Col>
            <Col span="2" class="ivu-form-item-label">使用面积：</Col>
            <Col span="2" class="ivu-form-item-content">
              <Input v-model="item.useArea"  @on-blur="bb" ></Input>
            </Col>
            <Col span="3" class="ivu-form-item-label">房屋共有人口：</Col>
            <Col span="2" class="ivu-form-item-content">
              <Input v-model="item.gjPerson"></Input>
            </Col>
            <Col span="3" class="ivu-form-item-label">所含保障人口：</Col>
            <Col span="2" class="ivu-form-item-content">
              <Input v-model="item.bzPerson"></Input>
            </Col>
          </Row>
          <Row class="mb20">
            <Col span="4" class="ivu-form-item-label" >保障人口所占份额：</Col>
            <Col span="3" class="ivu-form-item-content" style="display: inline-flex;">
              <Input v-model="item.bzPercent" @on-blur="getAvgArea"></Input>
              <span style="display: inline-block;">%</span>
            </Col>
            <Col span="2" class="ivu-form-item-label">承租人：</Col>
            <Col span="2" class="ivu-form-item-content">
              <Input v-model="item.holder"></Input>
            </Col>
            <Col span="3" class="ivu-form-item-label">人均建筑面积：</Col>
            <Col span="2" class="ivu-form-item-content">
              <Input v-model="item.buildAveAreaHfh"></Input>
            </Col>
          </Row>
        </div>
        <Divider dashed/>
      </div>
      <div style="width: 100%;float: left;height: 40px;line-height: 40px">
        <Col span="4" class="ivu-form-item-label">住房总建筑面积 M2：</Col>
        <Col span="5" class="ivu-form-item-content">
          <Input v-model="total_housing_area"></Input>
        </Col>
        <Col span="3" class="ivu-form-item-label">住房总使用面积 M2：</Col>
        <Col span="5" class="ivu-form-item-content">
          <Input v-model="useArea"></Input>
        </Col>
        <Col span="4" class="ivu-form-item-label">拆迁补偿金是否缴存：</Col>
        <Col span="2" class="ivu-form-item-content">
          <RadioGroup v-model="formDate.removeAmountPay">
            <Radio :label="item.value" v-for="item in house1" :value="item.value" :key="item.value">{{item.label}}</Radio>
          </RadioGroup>
        </Col>
      </div>
      <div style="width: 100%;float: left;height: 40px;line-height: 40px">
        <Col span="4" class="ivu-form-item-label">总人均建筑面积 M2：</Col>
        <Col span="5" class="ivu-form-item-content">
          <Input v-model="buildAveArea"></Input>
        </Col>
        <Col span="3" class="ivu-form-item-label">人均使用面积 M2：</Col>
        <Col span="5" class="ivu-form-item-content">
          <Input v-model="useAveArea"></Input>
        </Col>
        <Col span="4" class="ivu-form-item-label">房屋类型：</Col>
        <Col span="3" class="ivu-form-item-content">
          <RadioGroup v-model="formDate.houseType">
            <Radio :label="item.value" v-for="item in house" :value="item.value" :key="item.value">{{item.label}}</Radio>
          </RadioGroup>
        </Col>
      </div>
      <div style="width: 100%;float: left;height: 40px;line-height: 40px">
        <Col span="4" class="ivu-form-item-label">房屋拆迁情况：</Col>
        <Col span="4" class="ivu-form-item-label">拆迁补偿金金额（元）：</Col>
        <Col span="3" class="ivu-form-item-content">
          <Input v-model="formDate.removeAmount"></Input>
        </Col>
        <Col span="2" class="ivu-form-item-label">拆迁时间：</Col>
        <Col span="2" class="ivu-form-item-content">
          <DatePicker type="date" v-model="formDate.removeDate" style="width: 200px"></DatePicker>
        </Col>
      </div>
      <div class="mb20">
        <Row>
          <Col span="14" class="ivu-form-item-label">
            <Button @click="save()">提交家庭住房保障情况</Button>
          </Col>
        </Row>
      </div>
    </Form>
  </div>
</template>
<script>
import { date2str } from '@/api/eventlist'
export default {
  name: 'Form17_4',
  data () {
    return {
      a: 0,
      b: 0,
      house1: [{ label: '是', value: 1 }, { label: '否', value: 2 }],
      house: [{ label: '平房', value: 1 }, { label: '楼房', value: 2 }],
      buildAve: 0,
      // useArea: 0,
      total_housing_area: 0,
      areaArr: [],
      bwk: '0',
      paramsArr: [],
      list: [],
      sectionList: [],
      streetList: [],
      committeesList: [],
      batchList: [],
      person_list: [],
      companyList: [],
      ownertype_list: [
        { label: '私房（参与计算总面积及人均面积）', value: 'a' },
        { label: '承租私房', value: 'b' },
        { label: '自行搭建临时房屋', value: 'i' },
        { label: '无房其他', value: 'j' },
        { label: '有房其他（参与计算总面积及人均面积）', value: 'k' }
      ],
      buildAveArea: 0, // 总人均建筑面积
      useAveArea: 0, // 总人均使用面积
      buildArea: 0, // 住房总建筑面积
      useArea: 0// 住房总使用面积
    }
  },
  props: {
    formDate: Object,
    tempData: Object,
    ruleData: Object,
    areamianji: String,
    itemInfoObj: Object,
    // useArea: Number,
    isdbnum: Number
  },
  mounted () {
    console.log(this.isdbnum, '保障人口数')
    this.total_housing_area = this.formDate.buildArea
    this.buildAveArea = this.formDate.buildAveArea
    this.useArea = this.formDate.useArea
    this.useAveArea = this.formDate.useAveArea
  },
  watch: {
  },
  methods: {
    // 住房总建筑面积
    getArea () {
      let tempList = this.tempData.houseList2
      this.total_housing_area = 0
      let that = this
      for (var i = 0; i < tempList.length; i++) {
        if (tempList[i].ownerType === 'a' || tempList[i].ownerType === 'k') {
          that.total_housing_area += parseInt(tempList[i].buildArea || '0')
        } else {
          that.total_housing_area += parseInt(tempList[i].buildArea || '0')
          that.buildAveArea = that.buildAveArea + '0.00'
          // that.total_housing_area = 0
        }
      }
      this.total_housing_area = this.total_housing_area.toFixed(2)
      this.formDate.buildArea = this.total_housing_area
      this.formDate.buildAveArea = this.buildAveArea
      console.log(this.total_housing_area, '住房总建筑面积')
    },
    // 住房总使用面积
    bb () {
      this.useArea = 0
      let tempList = this.tempData.houseList2
      let that = this
      for (var i = 0; i < tempList.length; i++) {
        if (tempList[i].ownerType === 'a' || tempList[i].ownerType === 'k') {
          that.useArea += parseInt(tempList[i].useArea || '0')
          console.log(that.useArea, '#@@@@@@')
        } else {
          console.log('不参与计算面积')
          that.useArea += parseInt(tempList[i].useArea || '0')
          that.useAveArea = that.useAveArea + '0.00'
        }
      }
      that.useArea = that.useArea.toFixed(2)
      that.formDate.useArea = that.useArea
      that.formDate.useAveArea = that.useAveArea
    },
    // 列表人均建筑面积
    getAvgArea () {
      this.useAveArea = 0
      this.buildAveArea = 0
      for (var i = 0; i < this.tempData.houseList2.length; i++) {
        let that = this
        if (that.tempData.houseList1[i].ownerType === 'a' || that.tempData.houseList1[i].ownerType === 'k') {
          console.log('参与计算面积')
          if (that.tempData.houseList2[i].buildArea !== '' && that.tempData.houseList2[i].bzPerson !== '' && that.tempData.houseList2[i].bzPercent !== '') {
            that.tempData.houseList2[i].buildAveAreaHfh = (parseInt(that.tempData.houseList2[i].buildArea) * parseInt(that.tempData.houseList2[i].bzPercent) / parseInt(that.tempData.houseList2[i].bzPerson) / 100).toFixed(2)
            that.useAveArea += (parseInt(that.tempData.houseList2[i].useArea) * parseInt(that.tempData.houseList2[i].bzPercent) / parseInt(that.tempData.houseList2[i].bzPerson) / 100)
            that.buildAveArea += (parseInt(that.tempData.houseList2[i].buildArea) * parseInt(that.tempData.houseList2[i].bzPercent) / parseInt(that.tempData.houseList2[i].bzPerson) / 100)
          }
        } else {
          console.log('不参与计算面积')
          that.useAveArea = that.useAveArea + 0
          that.buildAveArea = that.buildAveArea + 0
        }
      }
      this.useAveArea = this.useAveArea.toFixed(2)
      this.formDate.useAveArea = this.useAveArea
      console.log(this.useAveArea, '住房人均使用面积')
      this.buildAveArea = this.buildAveArea.toFixed(2)
      this.formDate.buildAveArea = this.buildAveArea
      console.log(this.buildAveArea, '总人均建筑面积')
      console.log(this.useArea, '!!!!!!!')
    },
    changeOwnerType (type) {
      if (type === 'b' || type === 'i' || type === 'j') {
        this.useAveArea = '0.00'
        this.formDate.useAveArea = this.useAveArea
        this.buildAveArea = '0.00'
        this.formDate.buildAveArea = this.buildAveArea
      } else {
        this.getArea()
        this.bb()
        this.getAvgArea()
      }
    },
    save () {
      console.log(this.formDate)
      console.log(this.areamianji, '规则信息')
      this.formDate.removeDate = date2str(this.formDate.removeDate)
      this.formDate.houseList = []
      for (var i = 0; i < this.tempData.houseList2.length; i++) {
        if (this.tempData.houseList2[i].Address !== '') {
          this.formDate.houseList.push(this.tempData.houseList2[i])
        }
      }
      let list = this.formDate.houseList
      for (var j = 0; j < list.length; j++) {
        if (list[j].Address === undefined || list[j].Address === '') {
          this.$Notice.error({ title: '请填写房屋地址', desc: '' })
          return false
        }
        if (list[j].ownerType === undefined || list[j].ownerType === '') {
          this.$Notice.error({ title: '请选择房屋性质', desc: '' })
          return false
        }
        if (list[j].owner === undefined || list[j].owner === '') {
          this.$Notice.error({ title: '请填写产权人', desc: '' })
          return false
        }
        if (list[j].buildArea === undefined || list[j].buildArea === '') {
          this.$Notice.error({ title: '请填写建筑面积', desc: '' })
          return false
        }
        if (list[j].useArea === undefined || list[j].useArea === '') {
          this.$Notice.error({ title: '请填写使用面积', desc: '' })
          return false
        }
        if (list[j].gjPerson === undefined || list[j].gjPerson === '') {
          this.$Notice.error({ title: '请填写房屋共有人口', desc: '' })
          return false
        }
        if (list[j].bzPerson === undefined || list[j].bzPerson === '') {
          this.$Notice.error({ title: '请填写所含保障人口', desc: '' })
          return false
        }
        if (list[j].bzPercent === undefined || list[j].bzPercent === '') {
          this.$Notice.error({ title: '请填写保障人口份额', desc: '' })
          return false
        }
        if (list[j].holder === undefined || list[j].holder === '') {
          this.$Notice.error({ title: '请填写承租人', desc: '' })
          return false
        }
      }
      console.log(this.formDate.buildAveArea, this.areamianji, '!@#')
      if (this.formDate.buildAveArea > this.areamianji) {
        this.$Notice.error({ title: '人均建筑面积不能大于0.00平方米', desc: '' })
        return false
      }
      this.$emit('ee')
    }
  }
}
</script>
